﻿@model HomeControllerModel.Index
@section css{
    <style type="text/css">
        .block-element {  }
        .slider { height: 216px; overflow: hidden; width: 790px;background-color: #FFFFFF; border: 1px solid #D8D8D8;border-right:none; }
        .slider-nav { border: 1px solid #D8D8D8;border-left:none; font-weight: bold; height: 216px; text-align: center; margin: 0; }
        .slider-nav li { background: -moz-linear-gradient(center top , #FFFFFF 9%, #D8D8D8 67%) repeat scroll 0 0 transparent; border-bottom: 1px solid #D8D8D8; border-left: 1px solid #D8D8D8; height: 53px; line-height: 53px; position: relative; vertical-align: bottom; width: 146px; }
        .tabs-right > .nav-tabs { border-left: 0; }
        .nav-tabs > li { margin-bottom: 0; }
        .tabs-right > .nav-tabs li a { border: none; border-radius: 0; }
        .tabs-right > .nav-tabs li a:hover { border: none; border-radius: 0; }
        
        .slider-nav li a { border-left: 0 none; color: #383838; display: block; width: 146px; height: 53px; line-height: 53px; }
        .slider-nav li a:hover { text-decoration: none; }
        .slider-nav li.active a { background: -moz-linear-gradient(center top , #FEBB12 9%, #FF9900 67%) repeat scroll 0 0 transparent; border-bottom: 1px solid #FF9900; border-left: 0 none; position: relative; }
        .slider-nav li.active a:after { background: url("http://d2mub7s43po4ah.cloudfront.net/en-UK/opt/generic/arrow-4.0.3300.png") no-repeat scroll 0 0 transparent; content: " "; height: 53px; left: -27px; position: absolute; width: 27px; }
    </style>
}
<div class="block-element">
    <div class="tabbable tabs-right">
        <ul class="nav nav-tabs slider-nav" style="margin: 0;">
            <li class="active" ><a href="#1" data-toggle="tab" style="padding: 0; margin: 0">储蓄卡</a></li>
            <li><a href="#2" data-toggle="tab" style="padding: 0; margin: 0">信用卡</a></li>
            <li><a href="#3" data-toggle="tab" style="padding: 0; margin: 0">现金或刷卡</a></li>
            <li ><a href="#4" data-toggle="tab" style="padding: 0; margin: 0">dafd</a></li>
        </ul>
        <div class="tab-content slider">
            <div class="tab-pane active" id="1">
                <a href="show/auction/2802016/The-New-Apple-Bundle/">
                    <img src="/img/01.jpg"></a>
            </div>
            <div class="tab-pane active" id="2">
                asdfasf2
            </div>
            <div class="tab-pane active" id="3">
                asdfasf3
            </div>
            <div class="tab-pane active" id="4">
                <a href="show/auction/2802016/The-New-Apple-Bundle/">
                    <img src="/img/01.jpg"></a>
            </div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <ul class="thumbnails">
        @foreach (var o in Model.Auctions)
        {
            <li id="item-@(o.Id)" class="span4">
                <div class="thumbnail">
                    <p>
                        @o.Id</p>
                    <p class="title">
                        @o.Name</p>
                    <img alt="300x200" data-src="holder.js/300x200" style="width: 300px; height: 200px;"
                        src="">
                    <div class="caption">
                        <p class="marketprice">
                            参考价：￥@(o.MarketPrice)
                        </p>
                        <p class="icon">
                            @(o.Counter)
                            @(o.Status)
                        </p>
                        <p id="counter-@(o.Id)" class="counter">
                            @(o.Counter)
                        </p>
                        <p id="price-@(o.Id)" class="price">
                            ￥@(o.BidPrice.ToString("N"))
                        </p>
                        <p id="msg-@(o.Id)" class="msg">
                            最高出价<br />
                            @(o.NickName)
                        </p>
                        <p>
                            <button id="btn-@(o.Id)" class="btn btn-large" type="button" onclick="bid(@(o.Id))">
                                出 价</button></p>
                    </div>
                </div>
            </li>
        }
    </ul>
</div>
<div>
    <object id="ZmqSocketFlash" width="0" height="0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
        <param name="movie" value="/misc/zmqsocket.swf?r=@(Guid.NewGuid())" />
        <param name="allowScriptAccess" value="sameDomain" />
        <embed name="ZmqSocketFlash" width="0" height="0" src="/misc/zmqsocket.swf?r=@(Guid.NewGuid())" type="application/x-shockwave-flash" />
    </object>
</div>
<div id="message">
</div>
@if (Model.Opened)
{
    <script src="/misc/zmqsocket.js" type="text/javascript"></script>
    <script type="text/javascript">
            var userId = @(Model.Identity.Id) ;
            var timer = null;
            var isReady = false;
            var marketOpened = @(Model.Opened.ToString().ToLower()) ;
            var auctions =  @(Model.JsonData) ;

            function bid(id) {
          
                var auction = auctions[id];
                if(auction!=null) {
                    if(userId<1) {
                        alert('登录');
                        return;
                    }
                    if (auction.Status==2) {
                        alert('已成交');
                    }
                    if (userId==auction.UserId) {
                        alert('不能连续出价');
                    }
                    else {
                        $.postJSON('/home/bid', {param:id}, function(result) {
                            if(result.Status==true) {
                                
                            }
                            else {
                                alert(result.Message);
                            }
                        });
                    }
                }
        }
            
            function updateAuction(i, now, auction) {
                if (isReady == false) {
                    return;
                }
                else if (auction.UserId == 0) {
                    return;
                }
                var counter = $("#counter-" + i);
                var price = $("#price-" + i);
                var msg = $("#msg-" + i);
                var btn = $("#btn-" + i);

                if (auction.Status == 2) {
                    $(counter).html('已成交');
                    $(btn).attr('disabled', 'disabled');
                    return;
                }
                var interval = auction.Interval - 1;
                if (interval > 0) {
                    auction.Interval = interval;
                    $(counter).html(interval);
                }
                else {
                    auction.Interval = 0;
                    $(counter).html('核对出价');
                }
                $(price).html(auction.Price);
                $(msg).html("最高出价<br />" + auction.NickName);
            }

            function priceChanged (result) {
              var id = result.Data.Id;
              var now = new Date();
              var auction = auctions[id];
              if (result.Status==true) {
                  var data = result.Data;
                  auction.Price = data.Price;
                  auction.UserId = data.UserId;
                  auction.Interval = data.Interval;
                  auction.NickName = data.NickName;
                  updateAuction(id, now, auction);
              }
              else {
                  alert(result.Message);
              }
          }
            
          function  statusChanged (data) {
              var a = data.A;
              var b = data.B;
              var c = data.C;
              $.each(a, function(i, n) {
                  var counter = $("#counter-" +n.Id);
                  $(counter).html(n.Interval);
              });
              $.each(c, function(i, n) {
                  var counter = $("#counter-" +n);
                  $(counter).html('已成交');
                  setTimeout(function() {
                      var item = $("#item-" + n);
                      $(item).appendTo('.thumbnails');
                  }, 3000);
              });
          }
          
          $(function () {
              var socket = new ZmqSocket(userId);
              socket.onopen = function() {
                  isReady = true;
                  //alert(isReady)
                  //socket.send([0, 'dd']);
//alert(0);
//                  timer = setInterval(function() {
//                      var now = new Date();
//                      $.each(auctions, function(i, auction) {
//                          updateAuction(i, now, auction);
//                      });
//                  }, 1000);
              };

                socket.onmessage = function () {
                    if (socket.available()) {
                        var message = socket.recv();
                         $("#message").html(message);
                            var result = eval('(' + message + ')');
                            if (result.Extra == "statusChanged") {
                                //console.log(result.Data);
                                statusChanged(result.Data);
                            }
                            else if (result.Extra == "priceChanged") {
                                priceChanged(result);
                            }
                        
                    } else {
                        alert('Assertion failure!');
                    }
                };
                socket.onclose = function () { alert('close'); };
                socket.onerror = function (msg) { alert(msg); };
                socket.connect("127.0.0.1", 3333);
            });
    </script>
}
